<template>
  <div>

    <ul>
      <div class="big">
        <img :src="kong" alt="" />
      </div>
      <li v-for="(i, item) in arr2" :key="item" @click="qiehuan(item)">
        <img :src="i.pic" alt="" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr2: [
        { pic: require("./img2/bama02.jpg") },
        { pic: require("./img2/bama04.jpg") },
        { pic: require("./img2/bama03.jpg") },
        { pic: require("./img2/bama05.jpg") },
      ],
      kong: require("./img2/bama01.jpg"),
    };
  },

  methods: {
    qiehuan(item) {
      this.kong = this.arr2[item].pic;
    },
  },
  mounted() {
    var id = this.$router;
    console.log(id);
  },
};
</script>
<style>
ul {
  width: 300px;
}
ul li {
  width: 25%;
  box-sizing: border-box;
  float: left;
}
ul li img {
  width: 100%;
  height: 100%;
}
.big {
  width: 300px;
  height: 300px;
  background: pink;
}
.big img {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}

ul,
li {
  list-style: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}
/* 版心-页面的一个共同宽度 容器 啃忒内儿 */
.container {
  width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
/* 最最最重要的就是我们清除浮动 */
.clearfix {
  *zoom: 1;
  /* IE6/7兼容 */
}
.clearfix:after {
  display: table;
  content: " ";
  clear: both;
}
.clearfix:after {
  display: block;
  content: " ";
  clear: both;
}
</style>